import React, { useRef } from "react";
import { useDrag, useDrop } from "react-dnd";
import {
  PlayCircleOutlined,
  DeleteOutlined,
  EyeOutlined,
} from "@ant-design/icons";
import { Image } from "antd";
import "./index.less";

const type = "DragableUploadList";

const DragableUploadListItem = ({
  moveRow,
  file,
  index,
  fileType,
  handleRemove,
  handelPreview,
  VIDEO_ENUMS,
  IMAGE_ENUMS,
}) => {
  const ref = useRef(null);
  const [{ isOver, dropClassName }, drop] = useDrop({
    accept: type,
    collect: (monitor) => {
      const { index: dragIndex } = monitor.getItem() || {};

      if (dragIndex === index) {
        return {};
      }

      return {
        isOver: monitor.isOver(),
        dropClassName:
          dragIndex < index ? " drop-over-downward" : " drop-over-upward",
      };
    },
    drop: (item) => {
      moveRow(item.index, index);
    },
  });
  const [, drag] = useDrag({
    type,
    item: {
      index,
    },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });
  drop(drag(ref));

  // 图片 fileType = 1
  const renderImage = () => {
    return (
      <div className="view-image" key={index}>
        <Image width={102} height={102} src={file.url} preview={false}></Image>
        <div className="view-mask">
          {/* 自定义预览 */}
          <EyeOutlined
            className="icon"
            onClick={() => handelPreview(index, 1)}
          />
          {/* 自定义删除 */}
          <DeleteOutlined
            className="icon"
            onClick={() => handleRemove(index)}
          />
        </div>
      </div>
    );
  };

  // 视频 fileType = 2
  const renderVideo = () => {
    return (
      <div className="view-image" key={index}>
        <video width={102} height={102} src={file.url}></video>
        <div className="view-mask">
          {/* 自定义预览 */}
          <PlayCircleOutlined
            className="icon"
            onClick={() => handelPreview(index, 2)}
          />

          {/* 自定义删除 */}
          <DeleteOutlined
            className="icon"
            onClick={() => handleRemove(index)}
          />
        </div>
      </div>
    );
  };

  // 图片+视频 fileType = 3
  const renderImageAndVideo = () => {
    const videoArr = VIDEO_ENUMS.map((item) => "." + item.split("/")[1]);
    let isVideo = videoArr.some((item) => file.url.indexOf(item) !== -1);

    const imageArr = IMAGE_ENUMS.map((item) => "." + item.split("/")[1]);
    let isImage = imageArr.some((item) => file.url.indexOf(item) !== -1);

    if (isImage) {
      return renderImage();
    }

    if (isVideo) {
      return renderVideo();
    }
  };

  const renderFunc = {
    1: renderImage,
    2: renderVideo,
    3: renderImageAndVideo,
  };

  return (
    <div
      ref={ref}
      className={`ant-upload-draggable-list-item ${
        isOver ? dropClassName : ""
      }`}
      style={{
        cursor: "move",
      }}
    >
      {renderFunc[fileType]()}
    </div>
  );
};

export default DragableUploadListItem;
